<!--
 * @Author: your name
 * @Date: 2021-11-24 20:35:54
 * @LastEditTime: 2022-01-29 00:54:58
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \vue-antd-admin-y\src\components\map\index.vue
-->
<template>
  <div :style="{ width: '100%', height: '600px','padding-bottom':'80px' }">
    <el-amap-search-box
      class="search-box"
      :search-option="searchOption"
      :on-search-result="onSearchResult"
    >
      <!-- 搜索条件 是个对象 属性是city城市名，citylimit：false； 搜索回调函数 -->
    </el-amap-search-box>
    <el-amap
      vid="amap"
      class="amap-demo"
      :amap-manager="amapManager"
      :events="events"
      :center="center"
      :zoom="zoom"
    >
      <!-- :plugin="plugin"   点标记在地图上显示的位置，默认为地图中心点， -->
      <el-amap-marker
        v-for="(marker, index) in markers"
        :key="'marker' + index"
        :position="marker"
      >
      </el-amap-marker>
    </el-amap>
  </div>
</template>
<script>
import { AMapManager } from "vue-amap";
let amapManager = new AMapManager();

let Geocoder
AMap.plugin('AMap.Geocoder',function(){
    Geocoder = new AMap.Geocoder({
  radius: 1000,
  extensions: "all",
})
})
// let Geocoder;     //先声明变量
export default {
  name: "app",
  props:{
    lngDefault:{  //经度
      type:Number,
      default:113.378334
      },    
    latDefault:{   //纬度
      type:Number,
      default:22.504753
      },
      // default:Boolean
  },
  components: {},
  data() {
    const self = this;
    return {
      center: [0, 0],
      loaded: false,
      zoom: 17,
      input: "",
      lng: 0,   //经度
      lat: 0,    //纬度
      amapManager,
      searchOption: {
        city: "中山市", //限制城市搜索
        citylimit: true,
      },
      markers: [], //标记
      events: {
        init: (o) => {
          o.getCity((result) => {
            console.log(result);
          });
        },
        click: (e) => {
          self.center = [e.lnglat.lng, e.lnglat.lat];
          self.markers = [];
          self.markers.push(self.center);
          self.lng = e.lnglat.lng
          self.lat =  e.lnglat.lat
         
          Geocoder.getAddress(self.center,  (status, result)=> {
            //根据坐标获取位置
            if (status === "complete" && result.info === "OK") {
              // console.log(result.regeocode.formattedAddress);
              this.$emit('getAddress',{address:result.regeocode.formattedAddress})
              self.input = result.regeocode.formattedAddress;
              document.querySelector(".search-box-wrapper input").value =
                self.input;
            }
          });
        },
      },
      plugin: [
        {
          enableHighAccuracy: true, //是否使用高精度定位，默认true
          timeout: 100, //超过10秒后停止定位，默认：无穷大
          convert: true, //自动偏移后的坐标为高德坐标，默认：true
          showButton: true, //显示定位按钮，默认：true
          buttonPosition: "RB", //定位按钮停靠位置，默认'LB'，左下角
          showMarker: true, //定位成功后在定位到的位置显示标记，默认：true
          showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
          panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认true
          zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          extensions: "all",
          pName: "Geolocation", //AMap-Geolocation 定位插件
          events: {
            init(o) {
              // o 是高德地图定位插件实例
              // console.log(o);
              o.getCurrentPosition((status, result) => {
                // console.log(result.position);
                if (result && result.position) {
                  self.lng = result.position.lng; //设置经度
                  self.lat = result.position.lat; //设置纬度
                  self.center = [self.lng, self.lat]; //设置坐标
                  self.markers.push(self.center); //获取当前定位并存入标记中显示标记点
                  self.loaded = true; //load
                  self.zoom = 14;
                  self.$nextTick(); //页面渲染好后
                }
              });
            },
          },
        },
        //Geocoder编码：根据地理名称来获得地点的经纬度
        {
          pName: "Geocoder",
          events: {
            init: (o) => {
              Geocoder = o; // o 则是AMap.Geocoder的实例 对外部的Geocoder变量进行赋值，在任何地方就都可以使用
              //data里的events中使用了Geocoder
              o.getAddress(self.center, function (status, result) {
                //根据坐标获取位置
                if (status === "complete" && result.info === "OK") {
                  self.input = result.regeocode.formattedAddress;
                  document.querySelector(".search-box-wrapper input").value =
                    self.input;
                }
              });
            },
          },
        },
      ],
    };
  },
  created() {
   
    //  console.log(this.lngDefault)
    //  console.log( this.latDefault)


    this.center = [this.lngDefault, this.latDefault]
    this.lng =this.lngDefault
    this.lat =this.latDefault
    this.markers.push( this.center)

    Geocoder.getAddress(this.center,  (status, result)=> {
            //根据坐标获取位置
            if (status === "complete" && result.info === "OK") {
              this.input = result.regeocode.formattedAddress;
              document.querySelector(".search-box-wrapper input").value =
                this.input;
            }
          });
    

  }, //生命周期 - 创建完成（可以访问当前this实例）
  mounted() {
    // this.plugin.events.init();
  }, //生命周期 - 挂载完成（可以访问DOM元素）
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  watch: {
    lat(newValue,oldValue){  //纬度
       this.$emit("spot", {latitude:newValue})
    },
    lng(newValue,oldValue){   //经度
     this.$emit("spot", {longitude:newValue})
    }
  },
  methods: {
   
    onSearchResult(pois) {
      // console.log(pois);
      this.input = document.querySelector(".search-box-wrapper input").value;
      
      this.center = [pois[0].lng, pois[0].lat]; //选择了第一个值
      this.markers = []; //标记点先清空
      this.markers.push([pois[0].lng, pois[0].lat]); //把搜索的位置的第一个值存入标记中并显示标记点
      this.$emit('getAddress',{address:this.input})
            Geocoder.getAddress(this.center,  (status, result)=> {
                //根据坐标获取位置
                if (status === "complete" && result.info === "OK") {
                  // this.input = result.regeocode.formattedAddress;
                   this.$emit('getAddress',{address:result.regeocode.formattedAddress})
                }
              });

      // console.log(this.markers);
    },
  },
};
</script>

<style  lang="less">
.map_address {
  height: 500px;
}
.address-wrapper {
  display: flex;
  flex-direction: column;
}
.search-box {
  // width:100vw;
  // height:40px;
}
.amap-logo {
  z-index: 1 !important;
}
.amap-copyright {
  z-index: 1 !important;
}
// .amap-demo{
//     flex:1;
//     height:100vh;
// }
</style>

